<template>
	<view style="width: 100%;overflow-x: hidden;">
		<block v-if="is_register==1">
			<view class="wel">
				您好，
			</view>
			<view class="wel_btm">
				欢迎登录峥上科技
			</view>
			<view class="username">
				<input type="text" value="" placeholder="请输入手机号码" placeholder-style="font-size: 28rpx;color: #B6BDBD;"
					@input="login_phonenumber" />
			</view>
			<view class="username" style="margin-top: 60rpx;" v-if="changeLoginMethods&&!setPassword">
				<input type="text" value="" placeholder="请输入密码" placeholder-style="font-size: 28rpx;color: #B6BDBD;"
					@input="login_password" />
			</view>
			<view class="username" style="margin-top: 60rpx;" v-if="!changeLoginMethods||setPassword">
				<input type="text" value="" placeholder="请输入验证码" placeholder-style="font-size: 28rpx;color: #B6BDBD;"
					@input="login_password" />
				<view class="code-time" @tap="getCode">
					{{codeTimer==0?'获取验证码':(codeTimer+'秒后重新获取')}}
				</view>
			</view>
			<view class="username" style="margin-top: 60rpx;" v-if="setPassword">
				<input type="text" value="" v-model="newPassword" placeholder="请输入新密码"
					placeholder-style="font-size: 28rpx;color: #B6BDBD;" />
			</view>
			<view class="username" style="margin-top: 60rpx;" v-if="setPassword">
				<input type="text" value="" placeholder="请确认新密码" placeholder-style="font-size: 28rpx;color: #B6BDBD;"
					v-model="newAginPassword" />
			</view>
			<view class="register">
				<block v-if="setPassword">
					<view class="" @tap="changeLogin(1)">
						密码登录
					</view>
					<view class="" @tap="changeLogin(2)">
						验证码登录
					</view>
				</block>
				<block v-else>
					<view class="" @tap="forget">
						忘记密码
					</view>
					<view class="" @tap="changeLogin(0)">
						{{changeLoginMethods?'验证码登录':"密码登录"}}
					</view>
				</block>

			</view>
			<view class="btn_login" @click="tologin">
				{{setPassword?"确认修改":"登录"}}
			</view>
			<view class="btn_login halfbgc" @click="change_register" v-if="!setPassword">
				注册
			</view>

		</block>
		<block v-else-if="is_register==2">
			<view class="wel_1" style="margin-bottom: 78rpx;">
				注册，
			</view>
			<view class="username op">
				<input type="text" value="" placeholder="请输入手机号码" @input="register_phonenumber"
					placeholder-style="font-size: 28rpx;color: #B6BDBD;" />
			</view>
			<view class="username" style="margin-top: 60rpx;">
				<input type="text" value="" v-model="newPassword" placeholder="请输入新密码"
					placeholder-style="font-size: 28rpx;color: #B6BDBD;" />
			</view>
			<view class="username" style="margin-top: 60rpx;">
				<input type="text" value="" placeholder="请确认新密码" placeholder-style="font-size: 28rpx;color: #B6BDBD;"
					v-model="newAginPassword" />
			</view>

			<view class="register-new"  @tap='upImage'>
				<view class="register-title">
					上传证书图片
				</view>
				<view class="register-upfile">
					选择文件 +
				</view>
			</view>
			<view class="">
				<img :src="item" alt=""  v-for="(item,index) in imgList" :key="index">
			</view>
			<!-- <view class="up_files" @tap='upImage'>
				<image style="position: relative;left: 48%;top: 20%;" v-if="imgList==''"
					src="../../static/image/regster.png" mode=""></image>
				<text style="position: absolute;left: 42%;top: 50%;" v-if="imgList==''">上传凭证</text>
				<view class="d-flex flex-wrap" style="width: 100%;height: 100%;">
					<block v-for="(item,index) in imgList" :key="index">
						<image style="height: 100%;%" class="flex-1" v-if="imgList!=''" :src="item" mode=" scaleToFill">
						</image>
					</block>
				</view>
			</view> -->
			<view class="btn_login" @tap="btn_Submit">
				提交
			</view>
			<view class="btn_login" @tap="this.is_register=1">
				返回
			</view>
		</block>
		<block v-else>
			<view style="margin: auto;	width: 420rpx;">
				<image class="up_success" src="../../static/image/shenhe.png" mode=""></image>
			</view>
			<view class="success_title">
				提交成功
			</view>
			<view class="success_await">
				请等待审核中
			</view>
			<view class="success_btn d-flex j-center a-center" @click="toindex">
				<view class="success_btn_text main-bg-color">
					下一步
				</view>
			</view>
		</block>
	</view>

</template>
<script>
	export default {

		data() {
			return {
				// 服务器地址  用于图片上传
				beaeUrl: 'https://xf.westts.cn/',
				//保存上传凭证图片地址
				imgList: [],
				is_register: 1,
				// 用户数据
				user_list: [],
				user_data: {
					//密码
					password: '',
					//手机号
					phonenumber: '',
					//凭证图片
					credentials: '',
				},
				//登录手机号和密码
				login_data: {
					//注册手机号
					phonenumber: '',
					//注册密码
					password: ''
				},
				changeLoginMethods: true, //验证码  密码登录相互转换
				codeTimer: 0, //验证码倒计时
				setPassword: false, //修改密码
				newPassword: '', //新密码
				newAginPassword: '', //再次输入新密码
			}
		},
		onLoad() {},
		methods: {
			//忘记密码
			forget() {
				this.setPassword = true
			},
			//获取验证码
			getCode() {

				if (this.codeTimer == 0) {
					this.codeTimer = 5
					let timer = setInterval(() => {
						this.codeTimer = this.codeTimer - 1
						if (this.codeTimer == 0) clearInterval(timer)
					}, 1000)
				}
			},
			//更换登录方式
			changeLogin(e) {
				console.log(e, 199);
				this.setPassword = false
				if (e == 0) {
					this.changeLoginMethods = !this.changeLoginMethods
				} else if (e == 1) {
					this.changeLoginMethods = true
				} else if (e == 2) {
					this.changeLoginMethods = false
				}
			},

			//登录账号
			login_phonenumber(e) {
				this.login_data.phonenumber = e.detail.value
			},
			//登录密码
			login_password(e) {
				this.login_data.password = e.detail.value
			},
			//获取注册手机
			register_phonenumber(e) {
				// this.user_data.username = e.detail.value
				this.user_data.phonenumber = e.detail.value
			},
			//获取注册密码
			register_password(e) {
				this.user_data.password = e.detail.value
			},
			/* 跳转注册页面 */
			change_register() {
				this.is_register = 2
			},
			//上传图片  反回在线地址
			upImage() {
				let arr = []
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						// console.log(res.tempFilePaths, 'res.tempFilePathsp');
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths)
						} else {
							this.imgList = res.tempFilePaths
						}
						console.log(this.imgList, 'this.imgList');
						this.imgList.forEach((item, index) => {
							uni.uploadFile({
								url: this.beaeUrl + 'fileUpload',
								filePath: item,
								name: 'files',
								success: (res) => {
									let credentials = JSON.parse(res.data)
									console.log(credentials.urls, 'credentials.urls');
									arr.push(credentials.urls)
								}
							});
						})
						this.user_data.credentials = arr
					}
				});
			},
			/* 注册提交 */
			btn_Submit() {
				var phone = this.user_data.phonenumber
				var strTemp = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
				if (strTemp.test(phone) && this.user_data.password != '') {
					let a = this.user_data.credentials.toString()
					this.$https.post("miniappEngineerRegister", {
						password: this.user_data.password,
						phonenumber: this.user_data.phonenumber,
						credentials: a
					}).then(res => {
						if (res.code == 200) {
							this.is_register = 3
						} else {
							uni.showModal({
								content: res.msg,
								showCancel: false
							})
						}
					})
					console.log(this.user_data, 'user_data');
				} else if (this.user_data.phonenumber == '') {
					uni.showToast({
						title: "请输入手机号",
						icon: 'error'
					})
				} else if (this.user_data.password == '') {
					uni.showToast({
						title: "请输入密码",
						icon: 'error'
					})
				} else if (!strTemp.test(phone)) {
					uni.showToast({
						title: "请输入正确手机",
						icon: 'error'
					})
				}
			},
			// 登录成功跳转
			tologin() {
				var phone = this.login_data.phonenumber
				var strTemp = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
				if (strTemp.test(phone) && this.login_data.password != '') {
					this.$https.post('miniappLogin', {
						phonenumber: this.login_data.phonenumber,
						password: this.login_data.password
					}).then(res => {
						if (res.code == 200) {
							uni.setStorageSync("token", res.token)
							uni.showToast({
								title: '登录成功',
							})
							setTimeout(() => {
								uni.switchTab({
									url: '../index/index'
								})
							}, 1500)
						} else {
							uni.showToast({
								title: '账户密码错误',
								icon: 'none'
							})
						}
					})
				} else if (this.login_data.phonenumber == '') {
					uni.showToast({
						title: "请输入手机号",
						icon: 'error'
					})
				} else if (this.login_data.password == '') {
					uni.showToast({
						title: "请输入密码",
						icon: 'error'
					})
				} else if (!strTemp.test(phone)) {
					uni.showToast({
						title: "请输入正确手机",
						icon: 'error'
					})
				}

			},
			//注册成功 等待审核 点击下一步跳转其他页面 
			toindex() {
				this.is_register = 1
			}
		}
	}
</script>
<style lang="scss" scoped>
	.register-new{
		margin: 42rpx 30rpx;
		display: flex;
		align-items: center;
	}
	.register-title{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #7F8084;
		line-height: 40rpx;
	}
	.register-upfile{
		width: 188rpx;
		height: 48rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		border: 2rpx solid #B6B6B6;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #B6B6B6;
		line-height: 48rpx;
		margin-left: 10rpx;
		text-align: center;
	}
	.code-time {
		position: absolute;
		height: 52rpx;
		padding: 0 16rpx;
		right: 0rpx;
		top: 30rpx;
		margin-top: -17rpx;
		background: #4053CD;
		border-radius: 26rpx;
		opacity: 0.59;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 52rpx;
		z-index: 99;
	}

	.halfbgc {
		opacity: 0.59;
	}

	.success_title {
		width: 166rpx;
		height: 56rpx;
		font-size: 40rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #4252CD;
		margin: auto;
		text-align: center;
	}

	.success_await {
		text-align: center;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #7F8084;
		line-height: 40rpx;
		width: 176rpx;
		height: 40rpx;
		margin: 20rpx auto;
	}

	.up_success {
		display: inline-block;
		width: 420rpx;
		height: 440rpx;
		margin: 290rpx auto 42rpx;
	}

	.up_files {
		width: 662rpx;
		height: 196rpx;
		background: #F1F1FA;
		border-radius: 20rpx;
		margin: auto;
		display: flex;
		position: relative;

		image {
			width: 38rpx;
			height: 38rpx;
			// margin-bottom: 20rpx;
		}

		text {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #4252CD;
		}
	}

	.btn_login {
		width: 690rpx;
		height: 92rpx;
		background: #4252CD;
		border-radius: 46rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 92rpx;
		text-align: center;
		margin: 40rpx auto;
	}

	.register {
		font-size: 24rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #4252CD;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.wel {
		font-size: 64rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
		padding: 180rpx 0 0 30rpx;
	}

	.wel_1 {
		font-size: 64rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
		padding: 40rpx 0 0 30rpx;
	}

	.wel_btm {
		font-size: 28rpx;
		color: #747474;
		margin-left: 30rpx;
		margin-top: 23rpx;
		margin-bottom: 80rpx;
	}

	.op {
		margin-bottom: 58rpx;
		padding-bottom: 40rpx !important;
	}

	.username {
		margin-left: 30rpx;
		width: 690rpx;
		border-bottom: 2rpx solid #EFEFEF;
		padding-bottom: 40rpx;
		position: relative;
	}

	.success_btn {
		padding-top: 320rpx;
	}

	.success_btn_text {
		width: 690rpx;
		text-align: center;
		height: 92rpx;
		line-height: 92rpx;
		color: #fff;
		border-radius: 46rpx;
	}
</style>
